<template>
  <div class="container">
    <category-list @category-change="onCategoryChange" />
    <router-view class="product-list"></router-view>
  </div>
</template>

<script>
import CategoryList from '@/components/CategoryList.vue'
// import ProductList from '@/components/ProductList.vue'

export default {
  name: 'Category',
  components: {
    CategoryList
    // ProductList
  },
  data() {
    return {
      selectedCategoryId: 1
    }
  },
  methods: {
    onCategoryChange(categoryId) {
      this.selectedCategoryId = categoryId
      console.log('Category change:', categoryId)
      this.$router.push({
        name: 'ProductList',
        params: {
          categoryId
        }
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  height: 100vh;
  padding: 0;
  margin: 0;
}
.product-list {
  width: 70%;
  padding: 10px;
  overflow-y: auto;
}
</style>
